<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 关键字和两个按钮 -->
        <el-form ref="form" class="form" :model="form" label-width="80px">
          <el-form-item label="关键字" class="item">
            <el-input v-model="form.id" placeholder="根据编号搜索" />
          </el-form-item>
          <el-form-item class="item">
            <el-row type="flex" justify="end">
              <el-button size="small" @click="removeFn">清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="searchFn"
              >搜索</el-button>
            </el-row>
          </el-form-item>
        </el-form>
        <!-- 数据条数展示栏 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <span class="text">
                <i class="el-icon-info" />数据一共 {{ counts }} 条</span>
            </div></el-col>
        </el-row>
        <!-- 表格区域 -->
        <el-table
          class="table"
          :data="tableData"
          style="width: 100%"
          max-height="2500"
        >
          <el-table-column prop="id" label="编号" />
          <el-table-column
            prop="questionType"
            :formatter="formatter"
            label="题型"
          />
          <el-table-column prop="questionIDs" label="题目编号">
            <template v-slot="scope">
              <div
                v-for="(obj, index) in scope.row.questionIDs"
                :key="index"
                style="color: rgb(0, 153, 255)"
                @click="reviewFn(obj.id)"
                v-html="obj.number"
              />
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" />
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
          />
          <el-table-column prop="accuracyRate" label="正确率" />
          <el-table-column prop="userName" label="录入人" />
          <el-table-column label="操作">
            <!-- slot-scope="scope" -->
            <template slot-scope="scope">
              <el-button
                type="danger"
                plain
                size="mini"
                circle
                @click="delFn(scope.row.id)"
              ><i class="el-icon-delete" /></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="pag" type="flex" justify="end">
          <el-pagination
            :current-page="form.page"
            :page-sizes="[20, 30, 50, 100]"
            layout="prev, pager, next,sizes, jumper"
            :total="counts"
            :page-size="form.pagesize"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <!-- 预览弹框 -->
        <el-dialog title="题目预览" :visible.sync="dialogTableVisible" @close="closeFn">
          <el-descriptions :column="4">
            <el-descriptions-item label="【题型】">{{
              formatter("", "", dialog.questionType, "")
            }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{
              dialog.id
            }}</el-descriptions-item>
            <el-descriptions-item label="【难度】">{{
              formatter1("", "", dialog.difficulty, "")
            }}</el-descriptions-item>
            <el-descriptions-item label="【标签】">
              {{ dialog.tags }}
            </el-descriptions-item>
            <el-descriptions-item label="【学科】">{{
              dialog.subjectName
            }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{
              dialog.directoryName
            }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{
              dialog.direction
            }}</el-descriptions-item>
          </el-descriptions>
          <!-- 分割线 -->
          <el-divider />

          <el-descriptions direction="vertical" :column="1">
            <el-descriptions-item
              content-style="color:rgb(0,0,255);"
              label="【题干】"
            >
              <span v-html="dialog.question" />
            </el-descriptions-item>
            <!-- 单选框 -->
            <el-descriptions-item
              v-if="isShow === '1'"
              label="单选题 选项: (以下选中的选项为正确答案)"
            >
              <el-radio-group v-model="radio">
                <el-radio
                  v-for="(item, index) in radioList"
                  :key="index"
                  style="display: block; margin-bottom: 10px"
                  :label="item.isRight"
                  :checked="item.isRight === 1 ? true : false"
                >
                  {{ item.code + "、" + item.title }}
                </el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="isShow === '2'"
              label="多选题 选项: (以下选中的选项为正确答案)"
            >
              <!-- 复选框 -->
              <el-checkbox-group :value="checked">
                <el-checkbox
                  v-for="(item, index) in checkList"
                  :key="index"
                  style="display: block; margin-bottom: 10px"
                  :label="item.code + '、' + item.title"
                  :checked="item.isRight === 1 ? true : false"
                />
              </el-checkbox-group>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions>
            <el-descriptions-item label="【参考答案】">
              <el-row>
                <el-button
                  class="button"
                  type="danger"
                  effect="dark"
                  @click="fullScreen"
                >视频答案解析</el-button>
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :colon="false">
            <el-descriptions-item label="">
              <el-row v-if="isShowscreen" class="screen">
                <video-player
                  ref="videoPlayer"
                  class="video-player vjs-custom-skin"
                  :playsinline="true"
                  :options="playerOptions"
                />
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions>
            <el-descriptions-item label="【答案解析】">
              <span v-html="dialog.answer" />
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions>
            <el-descriptions-item label="【题目备注】">{{
              dialog.remarks
            }}</el-descriptions-item>
          </el-descriptions>
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="closeDialog">关闭</el-button>
          </el-row>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import { videoPlayer } from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import 'videojs-flash'
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      form: {
        id: '', // 编号
        page: 1, // 当前页面
        pagesize: 20 // 页面显示的条数
      },
      // 弹框
      dialog: {},
      // 单选组选中
      radio: 1,
      // 单选数组
      radioList: [],
      // 单选多选切换
      isShow: '',
      counts: 0,
      // tableData: []
      tableData: [],
      dialogTableVisible: false,
      gridData: [],
      checkList: ['section', 'div'],
      // 视频组件显示
      isShowscreen: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4' || 'video/ogg' || 'video/webm', // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  created() {
    this.randoms()
  },
  methods: {
    // 获取组题列表
    async randoms() {
      const res = await randoms(this.form)
      // console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 枚举题型
    formatter(row, column, cellValue, index) {
      const obj = questionType.find(
        (item) => item.value === Number(cellValue)
      )
      return obj ? obj.label : '未知'
    },
    // 枚举难度
    formatter1(row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 清除表单
    removeFn() {
      this.form = {}
      this.$refs.form.resetFields()
    },
    // 搜索按钮
    async searchFn(value) {
      value = this.form.id
      const res1 = await randoms({ keyword: value })
      console.log(res1)
      this.counts = res1.data.counts
      this.tableData = res1.data.items
      this.form.page = res1.data.items.page
    },
    // 删除按钮
    async delFn(id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      await removeRandoms({ id })
      this.$message.success('删除成功')
      this.randoms()
    },
    // 预览
    async reviewFn(aid) {
      // console.log(aid)
      this.dialogTableVisible = true
      const res = await detail({ id: aid })
      // console.log(res)
      this.dialog = res.data
      this.checkList = res.data.options
      this.radioList = res.data.options
      this.playerOptions.sources[0].src = res.data.videoURL
      if (res.data.questionType === '1') {
        this.isShow = '1'
      } else if (res.data.questionType === '2') {
        this.isShow = '2'
      } else {
        this.isShow = '3'
      }
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.randoms()
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.form.page = val
      this.randoms()
    },
    // 关闭弹层
    closeFn() {
      this.dialogTableVisible = false
      this.isShowscreen = false
    },
    // 视频组件
    async fullScreen() {
      this.isShowscreen = true
    },
    closeDialog() {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style scoped>
.form {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.form .item {
  width: 50%;
}
.el-input {
  width: 350px;
}
.text {
  display: block;
  margin-left: 20px;
  padding-top: 10px;
  color: #909399;
  font-size: 14px;
}
.el-icon-info {
  margin-right: 8px;
}
.bg-purple-dark {
  background: #f4f4f5;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.pag {
  margin-top: 25px;
}
.el-divider {
  margin-bottom: 8px;
  margin-top: -5px;
}
.screen {
  width: 500px;
}
</style>
